<template>
	<view class="page">
		<image src="../../static/logo.png" class="logo" mode="widthFix" />
		<view class="content">
			<image src="../../static/pt.png" class="home-image">

				<view class="form" v-if="loginPage=='login'">
					<el-tabs v-model="activeName" @tab-click="handleClick" class="loginNav">
						<el-tab-pane v-for="(item) in loginListObg" :key="item.name" :label="item.title"
							:name="item.name">
						</el-tab-pane>
					</el-tabs>
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
						<el-form-item prop="phone">
							<el-input v-model="ruleForm.phone" placeholder="请输入用户名" class="ruleForm-input"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="ruleForm.password" placeholder="请输入密码" show-password
								class="ruleForm-input"></el-input>
						</el-form-item>
					</el-form>
					<view class="checkbox">
						<el-checkbox v-model="checked" class="rememberPas">记住密码</el-checkbox>
						<!-- <el-button type="text" @click="go('forget')">忘记密码</el-button> -->
					</view>
					<el-button type="primary" class="login-Btn" @click='login' @keydown='login' v-preventReClick>登录
					</el-button>
					<!-- <el-button type="text" @click="go('register')"><text style="color: #767786;">没有账号？</text>立即注册
					</el-button> -->
				</view>
		</view>

	</view>
</template>

<script>
	import {
		Request
	} from '../../model/request.js'
	import {
		Util
	} from '../../utils/util.js'
	// import {
	// 	config
	// } from "../../api/config.js";
	// import {
	// 	ServerUrl
	// } from "../../api/server_url.js";
	// import md5 from 'js-md5'
	
	// const checkAge = (rule, value, callback) => {
	// 	if (!value) {
	// 		return callback(new Error('请先阅读并同意千集注册协议和隐私政策'));
	// 	}
	// 	setTimeout(() => {
	// 		if (value !== true) {
	// 			callback(new Error('请先阅读并同意千集注册协议和隐私政策'));
	// 		} else {
	// 			callback();
	// 		}
	// 	}, 1000);
	// }
	
	export default {
		data() {
			return {
				ruleForm: {
					phone: '',
					password: '',
					getCode: '获取验证码',
					codeSM: '', //验证码
					rePas: '', //确认密码
					smsToken: '',
					companyName: '',
					realName: '',
					email: '',
					checked: false,
					registerChecked: false,
					userName: '',
					businessCode: '',
					businessIcense: '',
					companyAddress: '',
				},
				fileList: [],
				action: '',
				rules: {
					phone: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						// {
						// 	pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
						// 	message: '请输入6-20位英文和数字的正确密码'
						// },
					]
				},
				phone: '',
				password: '',
				codeSM: '', //验证码
				rePas: '', //确认密码
				smsToken: '',
				companyName: '',
				realName: '',
				email: '',
				checked: true,
				registerChecked: false,
				loginPage: 'login',
				activeName: 'first',
				registerActive: '0',
				getCode: '获取验证码',
				reCode: false,
				loginListObg: [{
						title: '登录',
						name: 'first'
					}
				],
				timmer: '',
			}
		},
		watch: {
			// loginPage: {
			// 	handler(newValue, oldValue) {
			// 		this.loginPage = newValue
			// 		clearInterval(this.timmer);
			// 		this.reCode = false
			// 		this.ruleForm.getCode = '获取验证码'
			// 		this.$refs.ruleForm.resetFields();
			// 		this.clearInput();
			// 	}
			// },
			// activeName: {
			// 	handler(newValue, oldValue) {
			// 		this.activeName = newValue
			// 		this.$refs.ruleForm.resetFields();
			// 		this.clearInput();
			// 	}
			// },
			// registerActive: {
			// 	handler(newValue, oldValue) {
			// 		this.registerActive = newValue
			// 		this.$refs.ruleForm.resetFields();
			// 		this.clearInput();
			// 	}
			// }
		},
		mounted() {
			// this.action = `${config.apiBaseUrl}${ServerUrl.UPLOADFILE}`;
		},
		methods: {
		// 	handleClick(tab, event) {},
		// 	go(e) {
		// 		this.loginPage = e;
		// 	},
		// 	async code() {
		// 		if (this.reCode == true) {
		// 			return
		// 		}
		// 		if (this.ruleForm.getCode > 0) {
		// 			return
		// 		}
		// 		if (Util.isNull(this.ruleForm.phone)) {
		// 			Util.showToast('请先填写手机号')
		// 			return
		// 		}
		// 		this.ruleForm.getCode = 5;
		// 		this.reCode = true;
		// 		let v = await Test.SENDNOTESENDMS(this.ruleForm.phone)
		// 		if (!Util.isNull(v.data)) {
		// 			Util.showToast(v.message)
		// 			this.ruleForm.smsToken = v.data.smsToken;
		// 			this.timmer = setInterval(() => {
		// 				if (this.reCode == true && this.ruleForm.getCode <= 60 && this.ruleForm.getCode > 0) {
		// 					this.ruleForm.getCode--;
		// 				} else if (this.ruleForm.getCode <= 0) {
		// 					clearInterval(this.timmer);
		// 					this.ruleForm.getCode = '重新发送';
		// 					this.reCode = false;
		// 				}
		// 			}, 1000);
		// 		}
		// 	},
			login(e) {
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						// if (this.activeName == 'first') {
							// result = {
							// 	status: 200,
							// 	data: {
							// 		userId: 'userid123456',
							// 		companyName: '深圳市一凡科技传媒有限公司'
							// 	}
							// }
							// console.log(result, 'result')
						// }
						let result
						result = await Request.Login(this.ruleForm.phone, this.ruleForm.password)
						if (!Util.isNull(result)) {
							if (result.code == 200) {
								let user = result.data
								console.log(user)
								Util.setStorage('user', JSON.stringify(user))
								uni.navigateTo({
									url: '../home/home'
								})
							} else {
								this.clearInput()
								Util.showToast(result.message, 1)
							}
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				})
			},
			
			clearInput() {
				this.ruleForm = {
					phone: '',
					password: '',
					getCode: '获取验证码',
					codeSM: '', //验证码
					rePas: '', //确认密码
					smsToken: '',
					companyName: '',
					realName: '',
					email: '',
					checked: false,
					registerChecked: false,
					userName: '',
					businessCode: '',
					businessIcense: '',
					companyAddress: '',
				}
			},
		// 	see(e) {
		// 		uni.navigateTo({
		// 			url: `./argument?index=${e}`
		// 		})
		// 	},
		// 	handleRemove(file, fileList) {
		// 		console.log(file, fileList);
		// 		this.ruleForm.businessIcense = ''
		// 	},
		// 	handlePreview(file) {
		// 		console.log(file);
		// 	},
		// 	UPbusinessIcense(res, file) {
		// 		console.log(res, file)
		// 		this.ruleForm.businessIcense = res.url
		// 	},
		// 	beforeAvatarUpload(file) {
		// 		// const isLtSize = file.size / 1024 <= 300;
		// 		// if (!isLtSize) {
		// 		// 	Util.showToast('*示意图上传：606x306px,小于等于300KB!');
		// 		// }
		// 		// return isLtSize;
		// 	},
		}
	}
</script>

<style scoped>
	.page {
		background-image: url(../../static/bg.png);
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		font-family: 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', 'Helvetica Neue', Helvetica, 'PingFang SC', Arial, sans-serif;
		font-size: 14px;
		cursor: pointer;
	}

	.ruleForm {
		width: 382px;
		margin: 0 0 10px 30px;
	}

	>>>.el-form-item__content {
		margin-left: 0 !important;
	}

	>>>.ruleForm-input .el-input__inner {
		width: 382px;
		height: 42px;
		border: 1px solid #f5f5f5;
		border-radius: 2px;
		font-size: 14px;
		font-family: PingFang SC;
		margin-bottom: 10px;
		font-weight: 500;
		display: flex;
		align-items: center;
	}

	>>>.ruleForm-register-input .el-input__inner {
		width: 382px;
		height: 42px;
		border: 1px solid #f5f5f5;
		border-radius: 2px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		display: flex;
		align-items: center;
	}

	>>>.register-label .el-form-item__label {
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
		position: relative;
		left: -17px;
	}

	>>>.register-label .el-form-item__label::before {
		content: ' ' !important;
	}

	>>>.register-label .el-form-item__label::after {
		content: '*';
		color: red;
	}

	.form {
		width: 460px;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		margin-right: 72px;
		overflow-y: scroll;
		overflow-x: hidden;
		scrollbar-width: none;
	}

	.form::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 0px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
	}

	.form::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #535353;
	}

	.form::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		background: #ededed;
	}

	.accountMsg {}

	.title {
		margin: 8px 0 8px 30px;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
	}

	.title::after {
		content: '*';
		color: red;
	}

	.register-input {
		margin: 16px 0 0 30px;
		width: 369px;
		height: 42px;
		border: 1px solid #f5f5f5;
		border-radius: 2px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		padding-left: 13px;
		display: flex;
		align-items: center;
	}

	.flexContent {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 400px;
		margin-left: 30px;
		position: relative;
	}

	.login-Btn {
		width: 380px;
		height: 48px;
		background: #4A92FD;
		border-radius: 2px;
		margin-left: 30px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.logo {
		/* width: 270px; */
		/* height: 65px; */
		width: 168px;
		position: absolute;
		left: 65px;
		top: 56px;
	}

	.home-image {
		width: 572px;
		height: 460px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		/* transform: scale(0.9,0.9); */
		margin: 119px 0 89px 34px;
	}

	.home-image:hover {
		transform: scale(1.01, 1.01);
		transition: all 0.5s;
	}

	.checkbox {
		display: flex;
		align-items: center;
		margin-left: 30px;
		margin-bottom: 57px;
		justify-content: space-between;
		width: 382px;
	}

	.agreement {
		color: #4A92FD;
	}

	.noneUser {}

	.rememberPas {
		user-select: none;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}

	.focuInput {
		width: 369px;
		height: 42px;
		border: 1px solid #f5f5f5;
		border-radius: 2px;
		margin: 0 0 40px 30px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		padding-left: 13px;
		display: flex;
		align-items: center;
	}

	.loginPlaceholder {
		opacity: 0.36;
	}

	@keyframes imgMove {
		0% {
			top: 226px;
		}

		100% {
			top: 230px;
		}
	}

	.content {
		width: 1220px;
		height: 668px;
		background: #FFFFFF;
		border-radius: 10px;
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
	}

	.loginNav {
		width: 382px !important;
		margin: 145px 0 20px 30px;
	}

	>>>.loginNav .el-tabs__item {
		font-size: 24px;
		font-family: PingFang SC;
		margin-bottom: 11px;
		font-weight: 500;
		color: #C5C9D3;
	}

	>>>.loginNav .is-active {
		font-size: 30px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #111111;
	}

	>>>.loginNav .el-tabs__active-bar {
		height: 0;
	}
	
	>>>.el-tabs__nav-wrap::after {
		height: 0;
	}

	.forgetTitle {
		font-size: 30px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #16171F;
		margin: 116px 0 15px 30px;
	}

	.forgetInput {
		margin-bottom: 24px;
		display: flex;
		position: relative;
	}

	.getCode {
		width: 80px;
		height: 42px;
		background: #4A92FD;
		border-radius: 0px 2px 2px 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
